<template>
    <div>
        <el-form :inline="true" class="clearfix">
            <div class="fl query-l">
                <el-form-item label="悬赏编号">
                    <el-input v-model="data.rewardNo"></el-input>
                </el-form-item>
                <el-form-item label="悬赏名称">
                    <el-input v-model="data.name"></el-input>
                </el-form-item>
                <el-form-item label="项目属性">
                    <el-select clearable placeholder="请选择" v-model = data.isInternal.value>
                        <el-option
                            v-for = "item in data.isInternal.options"
                            :label = "item.label"
                            :value = "item.value"
                            :key = "item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间" >
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="data.publishTimeStart"
                    >
                    </el-date-picker>
                    <span>至</span>
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="data.publishTimeEnd"
                    >
                    </el-date-picker>
                </el-form-item>
            </div>
            <div class="fr">
                <el-button type="primary" @click="collocation_query">查询</el-button>
            </div>
        </el-form>
        <el-table :data="data.list" border row-class-name="text-center" height="364" class="user-table" style="width:100%">
            <el-table-column label="编号" :show-overflow-tooltip = "true" prop="rewardNo">
            </el-table-column>
            <el-table-column label="名称" :show-overflow-tooltip = "true" >
                <template scope="scope">
                    <router-link :to="`/project/caseDetail?id=${scope.row.id}`" class="color02" >
                        <span @click="keepLive">{{scope.row.name}}</span>
                    </router-link>
                    <span v-if = "scope.row.isInternal == 1" class="isInternal-icon">内</span>
                </template>
            </el-table-column>
            <el-table-column label="赏金" :show-overflow-tooltip = "true" prop="bounty">
            </el-table-column>
            <el-table-column label="周期" :show-overflow-tooltip = "true" prop="expectedDuration">
            </el-table-column>
            <el-table-column label="发布人" :show-overflow-tooltip = "true">
                <template scope="scope">
                    <span @click = "getUserInfo(scope.row.userAccountId, 1)" class="color02 pointer">{{scope.row.userAccountName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="发布时间" :show-overflow-tooltip = "true" prop="publishTime">
            </el-table-column>
            <el-table-column label="未托管原因">
                    <template scope="scope">
                        <el-select clearable placeholder="请选择" v-model="scope.row.notHostingReason" @change="changeReason(scope)" @visible-change="beforeSelectNotHostingReason" size="mini">
                            <el-option v-for="item in reasonArr"
                                :key="item.label"
                                :label="item.label"
                                :value="item.label"
                            ></el-option>
                        </el-select>
                    </template>
            </el-table-column>
            <el-table-column label="项目专员">
                <template scope="scope">
                        <el-select clearable placeholder="请选择" v-model="scope.row.specialistName" @change="changeSpecialistName(scope)" @visible-change="beforeSelectSpecialistName" size="mini">
                            <el-option v-for="item in specialist"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="147">
                <template scope="scope">
                    <span @click="followShowFn(scope.row.id)" class="color02 pointer mr-10">跟进记录</span>
                    <el-dropdown trigger="click">
                        <div class="more-menu menu-center"></div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item >
                                <router-link to="/project/caseDetail"><div>编辑</div></router-link>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native.prevent = "setNotShow(scope.row.id)">设为主站不显示</el-dropdown-item>
                            <el-dropdown-item @click.native.prevent = "setInterior(scope.row.id,scope)">设为内部项目</el-dropdown-item>
                            <el-dropdown-item @click.native.prevent = "showLogFn(scope.row.id)"><div>操作记录</div></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper clearfix" v-if="data.totalPage>1">
            <div class="fr mt-10">
                <span class="page-num font-14">
                    总数：<span v-text="data.totalCount"></span> 每页显示 <span v-text="data.pageSize"></span>  条 共 <span v-text="data.totalPage"></span> 页
                </span>
                <el-pagination class="fr" @current-change="changePage" :current-page="data.currentPage" :page-size="data.pageSize" layout="prev, pager, next" :total="data.totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isSelectNotHostingReason: false,
                isSelectSpecialistName: false
            }
        },
        props: ['data', 'follow', 'showUserAccoun', 'reasonArr', 'specialist'],
        methods: {
            keepLive () {
                this.$emit('keepLive')
            },
            setNotShow (id) {
                this.$emit('setNotShow', id)
            },
            setInterior (id, scope) {
                this.$emit('setInterior', id, scope)
            },
            showLogFn (id) {
                this.$emit('showLogFn', 1, 10, id)
            },
            collocation_query () {
                this.$emit('query')
            },
            changeReason (scope) {
                this.$emit('changeReason', scope, this.isSelectNotHostingReason)
            },
            changePage (currentPage) {
                this.$emit('changePage', currentPage)
            },
            beforeSelectNotHostingReason (isSelect) {
                this.isSelectNotHostingReason = isSelect
            },
            beforeSelectSpecialistName (isSelect) {
                this.isSelectSpecialistName = isSelect
            },
            changeSpecialistName (scope) {
                this.$emit('changeSpecialistName', scope, this.isSelectSpecialistName)
            },
            followShowFn (id) {
                this.$emit('followShowFn', 1, 10, id, '待托管') // TODO 分页问题
            },
            getUserInfo (id, type) {
                this.$emit('getUserInfo', id, type)
            }
        }
    }
</script>
